<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/tablibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>安装</title>
<link rel="stylesheet" href="${ctx}/public/css/install.css">
<script type="text/javascript"
	src="${ctx}/public/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="${ctx}/public/js/dic.js"></script>
</head>
<body>
	<div class="wrap">
		<div class="header">
			<h1 class="logo">logo</h1>
			<div class="icon_install">安装向导</div>
			<div class="version">1.0</div>
		</div>
		<section class="section">
		<div class="step">
			<ul>
				<li class="current"><em>1</em>配置</li>
				<li><em>2</em>创建数据</li>
				<li><em>3</em>完成安装</li>
			</ul>
		</div>
		<form id="form1" action="${ctx}/install/createDb" method="post">
			<div class="server">
				<table width="100%">
					<tbody>
						<tr>
							<td class="td1" width="100">系统信息</td>
							<td class="td1" width="200">&nbsp;</td>
							<td class="td1">&nbsp;</td>
						</tr>
						<tr>
							<td class="tar">系统名称：</td>
							<td><input type="text" name="systemname" id="systemname"
								value="" class="input"></td>
							<td><div id="J_install_tip_dbhost">
									<span class="gray"></span>
								</div></td>
						</tr>
					</tbody>
				</table>
				<table width="100%">
					<tbody>
						<tr>
							<td class="td1" width="100">数据库信息</td>
							<td class="td1" width="200">&nbsp;</td>
							<td class="td1">&nbsp;</td>
						</tr>
						<tr>
							<td class="tar">数据库类型：</td>
							<td><select name="dbtype" id="dbtype" class="input"
								onchange="changedb()"></select></td>
							<td></td>
						</tr>
						<tr id="ip" type="db">
							<td class="tar">IP：</td>
							<td><input id="dbip" name="dbip" class="input"></td>
							<td></td>
						</tr>
						<tr id="port" type="db">
							<td class="tar">端口号：</td>
							<td><input id="dbport" name="dbport" class="input">
							</td>
							<td></td>
						</tr>
						<tr id="name" type="db">
							<td class="tar">数据库名：</td>
							<td><input id="dbname" name="dbname" class="input">
							</td>
							<td></td>
						</tr>
						<tr id="usernametr" type="db">
							<td class="tar">用户名：</td>
							<td><input id="dbusername" name="dbusername" class="input">
							</td>
							<td></td>
						</tr>
						<tr id="passwordtr" type="db">
							<td class="tar">密码：</td>
							<td><input id="dbpassword" name="dbpassword" class="input"
								type="password"></td>
							<td></td>
						</tr>
						<tr id="filepath" type="db">
							<td class="tar">数据库文件路径：</td>
							<td><input id="dbfilepath" name="dbfilepath" class="input">
							</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<table width="100%">
					<tbody>
						<tr>
							<td class="td1" width="100">管理员信息</td>
							<td class="td1" width="200">&nbsp;</td>
							<td class="td1">&nbsp;</td>
						</tr>
						<tr>
							<td class="tar">用户名：</td>
							<td><input id="username" width="20" name="username" class="input"></td>
							<td></td>
						</tr>
						<tr>
							<td class="tar">密码：</td>
							<td><input id="password" width="20" name="password" class="input" type="password">
							</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<div id="J_response_tips" style="display: none;"></div>
			</div>
			<div class="bottom tac">
				<button type="button" onclick="checkForm();"
					class="btn btn_submit J_install_btn">创建数据</button>
			</div>
		</form>
		</section>
	</div>
</body>
<script type="text/javascript">
	$('#dbtype')
			.dicselect(
					{
						initvalue : "请选择",
						dic : "{'Oracle':'Oracle','MySQL':'MySQL','SqlServer':'SQL Server','PostgreSql':'postgreSQL','Sqlite':'sqlite'}"
					});
	$('tr[type="db"]').hide();
	function changedb() {
		var type = $('#dbtype').val();
		$('tr[type="db"]').hide();
		if (type == '') {

		} else if (type == 'sqlite') {
			$('tr[type="db"][id="filepath"]').show();
		} else {
			$('tr[type="db"][id="ip"]').show();
			$('tr[type="db"][id="port"]').show();
			$('tr[type="db"][id="name"]').show();
			$('tr[type="db"][id="usernametr"]').show();
			$('tr[type="db"][id="passwordtr"]').show();
		}
	}
	function checkForm() {
		if($.trim($('#systemname').val()).length == 0){
			alert("请输入系统名称！");
			return;
		}
		var dbtype =$('#dbtype').val();
		if(dbtype == ''){
			alert("请选择数据库类型！");
			return;
		}
		if($('#username').val() == ""){
			alert("请输入系统管理员用户名！");
			return;
		}
		if($('#password').val() == ""){
			alert("请输入系统管理员密码！");
			return;
		}
		$.post("${ctx}/install/test",{
			"dbtype":$('#dbtype').val(),
			"dbip":$('#dbip').val(),
			"dbport":$('#dbport').val(),
			"dbname":$('#dbname').val(),
			"dbusername":$('#dbusername').val(),
			"dbpassword":$('#dbpassword').val(),
			"dbfilepath":$('#dbfilepath').val()
		},function(data){
			if(data=='0'){
				alert('数据库连接失败！');
			}else{
				$('#form1').submit();
			}
		});
	}
</script>
</html>
